<template>
    <a-table :columns="columns" :data-source="dataSource"></a-table>
</template>
  
<script setup >
import { defineComponent } from 'vue';
import { Table } from 'ant-design-vue';

const columns = [
    {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '变更日期',
        dataIndex: 'changeDate',
        key: 'changeDate'
    },
    {
        title: '变更名称',
        dataIndex: "changeName",
        key: 'changeName'
    },
    {
        title: '变更原因',
        dataIndex: 'changeReason',
        key: 'changeReason'
    },
    {
        title: '申请金额（元）',
        dataIndex: 'applyAmount',
        key: 'applyAmount'
    },
    {
        title: "申请人",
        dataIndex: "applicant",
        key: "applicant"
    },
    {
        title: "变更状态",
        dataIndex: "changeStatus",
        key: "changeStatus"
    }
]
const dataSource = [
  {
    "id": 1,
    "changeDate": "2022-01-01",
    "changeName": "调整售价",
    "changeReason": "市场需求变化",
    "applyAmount": 50000,
    "applicant": "张三",
    "changeStatus": true
  },
  {
    "id": 2,
    "changeDate": '2022-02-05',
	"changeName":"更新产品规格",
	"changeReason":"客户反馈建议",
	"applyAmount":"1000000元", 
	"applicant":"李四", 
	"changeStatus":"已完成"
   },
   {
       'id':3,  
       'changeDate':'2022-03-10',  
       'changeName':'取消特惠活动',  
       'changereason':'销售低迷',  
        'applyAmount':30000,   
        'applicant':'王五',   
        'changestatus':"处理中"
   }
]


const props = defineProps({
    id: {
        type: String,
    }
})
const { id } = toRefs(props)
watch(id, () => {
    refresh(id.value);
});
const refresh = (id) => {
    console.log("negotiateChanges fatch Id", id)
}
</script>
  
<style scoped>
/* 可以自定义样式 */
</style>